﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Selection</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
        /*css_begin*/
        input[type="text"] {
            width: 160px;
        }

        label.normal {
            display: inline-block;
            width: 120px;
        }

        select {
            width: 120px;
        }

        label.wide {
            display: inline-block;
            width: 160px;
        }

        input[type="button"].narrow {
            width: 60px;
        }

        input[type="button"].wide {
            width: 160px;
        }
        /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
    /*code_begin*/
    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
        initSpread(spread);
    });

    function initSpread(spread) {
        $("#selectionPolicy").change(function () {
            var sheet = spread.getActiveSheet();

            var policy = parseInt($(this).val(), 10);
            sheet.selectionPolicy(policy);
        });

        $("#selectionUnit").change(function () {
            var sheet = spread.getActiveSheet();

            var unit = parseInt($(this).val(), 10);
            sheet.selectionUnit(unit);
        });

        $("#setBackColor").click(function () {
            var sheet = spread.getActiveSheet();
            var backColor = $("#backColor").val();

            sheet.selectionBackColor(backColor);
        });
        $("#setBorderColor").click(function () {
            var sheet = spread.getActiveSheet();

            var borderColor = $("#borderColor").val();
            sheet.selectionBorderColor(borderColor);
        });
        $("#tabStoptrue_Btn").click(function () {
            setIsTabStop(spread, true);
        });

        $("#tabStopfalse_Btn").click(function () {
            setIsTabStop(spread, false);
        });
    }

    function setIsTabStop(spread, isTabStop) {
        var sheet = spread.getActiveSheet();
        sheet.isPaintSuspended(true);
        var sels = sheet.getSelections();
        for (var index = 0; index < sels.length; index++) {
            var selRange = sels[index];
            if (selRange.col < 0 && selRange.row < 0) {
                sheet.getColumns(selRange.col, selRange.col + selRange.colCount - 1).tabStop(isTabStop);
            } else if (selRange.col < 0) {
                sheet.getRows(selRange.row, selRange.row + selRange.rowCount - 1).tabStop(isTabStop);
            } else if (selRange.row < 0) {
                sheet.getColumns(selRange.col, selRange.col + selRange.colCount - 1).tabStop(isTabStop);
            } else {
                sheet.getCells(selRange.row, selRange.col, selRange.row + selRange.rowCount - 1, selRange.col + selRange.colCount - 1).tabStop(isTabStop);
            }
        }
        sheet.isPaintSuspended(false);
    }
    /*code_end*/
    </script>
</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width:100%; height:310px;border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <label for="selectionPolicy" class="normal">SelectionPolicy:</label>
                <select id="selectionPolicy">
                    <option value="0">Single</option>
                    <option value="1">Range</option>
                    <option value="2" selected="selected">MultiRange</option>
                </select>
            </div>
            <div class="option-row">
                <label for="selectionUnit" class="normal">SelectionUnit:</label>
                <select id="selectionUnit">
                    <option value="0" selected="selected">Cell</option>
                    <option value="1">Row</option>
                    <option value="2">Column</option>
                </select>
            </div>
            <div class="option-row">
                <label for="backColor" class="wide">Selection BackColor:</label>
                <input type="text" id="backColor" value="rgba(204,255,51, 0.3)" />
                <input type="button" value="Set" id="setBackColor" class="narrow" />
            </div>
            <div class="option-row">
                <label for="borderColor" class="wide">Selection BorderColor:</label>
                <input type="text" id="borderColor" value="Accent 3 -40" />
                <input type="button" value="Set" id="setBorderColor" class="narrow" />
            </div>
            <div class="option-row">
                <input type="button" id="tabStoptrue_Btn" value="SetTabStop True" class="wide" />
                <input type="button" id="tabStopfalse_Btn" value="SetTabStop False" class="wide" />
            </div>
        </div>
    </div>
</body>
</html>